import * as THREE from 'three'
import { use3DEditorStore } from '@/store'
import { storeToRefs } from 'pinia'
import { PointerGenerator } from './usePointer'
import Utils from '@/graph/3d/utils'
import { TresContext } from '@tresjs/core'
import Shapegenerator from './shapes'
import { Pointer } from '@/graph/3d/config/shapes'

export default (mesh: THREE.Mesh, context: TresContext) => {
  const editorStore = use3DEditorStore()
  const { isCreating, pointers, creatingShape, creatingStep, handleElement } =
    storeToRefs(editorStore)
  const pointer = ref(new PointerGenerator({ canMove: true }, true))
  const enable = shallowRef(false)
  const vertices = ref<Pointer[]>([])
  const handlePointerDown = (e) => {
    enable.value = true

    if (handleElement) editorStore.setHandleElement(null)

    if (isCreating.value && creatingShape.value) {
      pointer.value = new PointerGenerator({
        position: e.point.toArray(),
        canMove: true,
      })
      const p = pointer.value
      const p1 = Utils.screenToWebGL(
        e.clientX,
        e.clientY,
        context.renderer.value.domElement,
        3,
      ) as THREE.Vector3
      const diff = new THREE.Vector3()

      const move = (e) => {
        const v1 = Utils.screenToWebGL(
          e.clientX,
          e.clientY,
          context.renderer.value.domElement,
          3,
        ) as THREE.Vector3
        diff.subVectors(v1, p1)
        p.offset[2] = diff.y * 20
      }
      const up = () => {
        enable.value = false
        const p1 = new THREE.Vector3().fromArray(p.position)
        const p2 = new THREE.Vector3().fromArray(p.offset)

        p.set({
          position: p2.add(p1).toArray(),
          offset: [0, 0, 0],
        })
        const newPointer = p.clone(true)
        vertices.value.push(newPointer)
        editorStore.addPointer(newPointer)
        editorStore.setCreatingStep(editorStore.creatingStep + 1)

        if (creatingStep.value === creatingShape.value.maxSteps) {
          const shape = Shapegenerator.create(
            creatingShape.value.type,
            vertices.value,
          )

          const pointers = shape.vertices.filter(
            (v) => vertices.value.findIndex((k) => k.id === v.id) === -1,
          )
          const position = new PointerGenerator({
            position: shape.position,
            canMove: true,
          })
          editorStore.addPointer([...pointers, position])

          editorStore.addShape(shape)
        }

        document.removeEventListener('mousemove', move)
        document.removeEventListener('mouseup', up)
      }
      document.addEventListener('mousemove', move)
      document.addEventListener('mouseup', up)
    }
  }
  const handlePointerMove = (e) => {
    editorStore.updateMouseVector(e.point.toArray())

    // if (!enable.value) return
  }
  const handlePointerup = (e) => {
    enable.value = false
  }

  return {
    enable,
    pointer,
    handlePointerDown,
    handlePointerMove,
    handlePointerup,
  }
}
